<template>
  <div class="hm-detail">
    <HmHeader :showArrow="true" @leftClick="back">
      <template #left>
        <div class="headerBack">返回</div>
      </template>
      <template>
        <div class="headerTitle">面经详情</div>
      </template>
    </HmHeader>
    <!-- <van-button type="primary" size="large" @click="fn">主要按钮</van-button>
    <van-button type="warning" color="blue">主要按钮</van-button>
    <van-button type="danger" round>主要按钮</van-button>
    <van-button type="primary" size="mini">主要按钮</van-button>
    <br /> -->
    <div class="mainContent">
      <h1>{{ data.stem }}</h1>
      <div class="info">
        <span>{{ data.createdAt }}</span>
        <span>|</span>
        <span>{{ data.views }} 浏览量</span>
        <span>{{ data.likeCount }} 点赞量</span>
      </div>
      <div class="qian">
        <img :src="data.avatar" alt="" />
        <span>{{ data.creator }}</span>
      </div>
      <div class="content" v-html="data.content"></div>
    </div>
    <div class="like-suggest">
      <van-icon
        name="like-o"
        class="like van-icon"
        ref="iconLike"
        @click="clicked('iconLike')"
      />
      <van-icon
        name="star-o"
        class="suggest van-icon"
        ref="iconSuggest"
        @click="clicked('iconSuggest')"
      />
    </div>
  </div>
</template>

<script>
//导入HmHeader组件
import HmHeader from "@/components/HmHeader.vue";
//导入UserRequest
import { UserRequest } from "@/api/user.js";

export default {
  data() {
    return {
      id: "",
      data: {},
    };
  },
  created() {
    this.id = this.$route.query.id;
    console.log(this.id);
    this.getDetail(this.id);
  },
  components: {
    HmHeader,
  },
  methods: {
    back() {
      this.$router.back();
    },
    fn() {
      console.log("点击了按钮");
    },
    //获取面经详情
    getDetail(id) {
      //获取token
      const token = localStorage.getItem("token");
      UserRequest.getDetail(id, token).then((res) => {
        this.data = res.data.data;
        console.log(this.data);
      });
    },
    //收藏和点赞
    collectAndLike(id, optType) {
      const token = localStorage.getItem("token");
      UserRequest.collectAndLike(id, token, optType).then((res) => {
        console.log(res);
      });
    },
    //点击高亮
    clicked(ref) {
      if (ref === "iconLike") {
        this.$refs.iconLike.classList.toggle("clicked");
        //点赞成功
        if (this.$refs.iconLike.classList.contains("clicked")) {
          this.$toast.success("点赞成功");
          this.collectAndLike(this.id, 1);
        } else {
          this.$toast.fail("取消点赞");
          this.collectAndLike(this.id, 1);
        }
      } else if (ref === "iconSuggest") {
        this.$refs.iconSuggest.classList.toggle("clicked");
        if (this.$refs.iconSuggest.classList.contains("clicked")) {
          this.$toast.success("收藏成功");
          this.collectAndLike(this.id, 2);
        } else {
          this.$toast.fail("取消收藏");
          this.collectAndLike(this.id, 2);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.headerBack {
  color: orange;
  font-size: (14 / @vw);
}
.headerTitle {
  padding-right: (20 / @vw);
}
.mainContent {
  padding: (10 / @vw);
  .info {
    margin-top: (10 / @vw);
    margin-bottom: (10 / @vw);
    color: #ccc;
  }
  .qian {
    display: flex;
    align-items: center;
    margin-bottom: (10 / @vw);
    color: #ccc;

    img {
      width: (40 / @vw);
      height: (40 / @vw);
      border-radius: 50%;
      margin-right: (10 / @vw);
    }
  }

  .content {
    text-indent: 2em;
  }
}
.like-suggest {
  display: flex;
  position: fixed;
  bottom: (100 / @vw);
  right: 0;
  .van-icon {
    font-size: (20 / @vw);
    width: (40 / @vw);
    height: (40 / @vw);
    text-align: center;
    line-height: (40 / @vw);
    border-radius: 50%;
    box-shadow: 2px 2px 10px 1px rgba(0, 0, 255, 0.2);
  }
  .clicked {
    background-color: #fec635;
    color: white;
  }
  .like {
    margin-right: (20 / @vw);
  }
  .suggest {
    margin-right: (20 / @vw);
  }
}
</style>
